<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>리스트 예시</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/helloworld/js/jquery/jquery-1.11.0.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/helloworld/js/jquery/ui/css/redmond/jquery-ui-1.10.4.custom.css" />
<script src="/helloworld/js/jquery/ui/js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="/helloworld/js/jquery/ui/js/jquery.ui.datepicker-ko.js" type="text/javascript"></script>
<script src="/helloworld/js/jquery/blockUI/jquery.blockUI.js" type="text/javascript"></script>
<script src="/helloworld/js/common/common.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/helloworld/js/jquery/jqgrid/css/ui.jqgrid.css" />
<script src="/helloworld/js/jquery/jqgrid/js/grid.locale-kr.js" type="text/javascript"></script>
<script src="/helloworld/js/jquery/jqgrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>

<style type="text/css">
    body { font-size: 12px; }
    
    .ui-jqgrid .ui-jqgrid-view, 
    .ui-jqgrid .ui-jqgrid-view input, 
    .ui-jqgrid .ui-jqgrid-view select, 
    .ui-jqgrid .ui-jqgrid-view textarea, 
    .ui-jqgrid .ui-jqgrid-view button { font-size:12px !important; }
    
</style>
<script type="text/javascript">
var lastsel;

var commonCode = [
{group:"2",data:[{key:"201",value:"2,value 1"},{key:"202",value:"2,value 2"},{key:"203",value:"2,value 3"},{key:"204",value:"2,value 4"}]},{group:"1",data:[{key:"101",value:"1,value 1"},{key:"102",value:"1,value 2"},{key:"103",value:"1,value 3"},{key:"104",value:"1,value 4"}]}
];

//코드구분자에 포함되는 코드정보의 [{key:?, value:?}...] 형식 배열 반환 
function getCommonCodeArr(gb) {
    for (var i = 0; i < commonCode.length; i++) {
        if (commonCode[i].group == gb) {
            return commonCode[i].data;
        }
    }
    return;
}

// 코드구분자 및 코드에 해당하는 표시값 반환
function getCommonCodeValue(gb, key) {
    var data = getCommonCodeArr(gb);
    
    for (var i = 0; data && i < data.length; i++) {
        if (data[i].key == key) { return data[i].value; }
    }
    
    return;
}

// 코드구분자에 해당하는 코드, 값으로 셀렉트 박스 html문자열 반환
function getCodeSelectHtml(gb, key) {
    var data = getCommonCodeArr(gb);
    var html = "<select id='code-" + gb + "' name='code-" + gb + "'>";
    for (var i = 0; data && i < data.length; i++) {
        html += "<option value='" + data[i].key + "'" + (key && key == data[i].key ? " selected " : "") + ">" + data[i].value + "</option>";
    }
    html += "</select>";
    return html;
}

//jqGrid 포맷터 - 조회모드에서 공통코드값을 키,값 에트리부터를 가진 span으로 변환
function formatterCodeSelect(gb) {
    return function(value, option, row) {
        var result = getCommonCodeValue(gb, value);
        var html = "<span key='" + value + "' value='" + result + "'>" + result + "</span>";
        return html;
    }
}

// jqGrid 언포맷터 - 조회모드에서 공통코드 셀렉트박스로부터 코드값을 식별
function unformatSelect(value, option, cell) {
    return $(cell).children("span").attr("key");
}

// 편집모드로 변환시 화면에 표시될 select 엘리먼트로 변환
function customSelectElem(gb) {
    return function(value, option) {
        var html = getCodeSelectHtml(gb, value);
        return $(html);
    }
}

//편집모드에서 값을 조회시 select 엘리먼트에서 값 식별
function customSelectValue(elem, operation, value) {
    return $(elem).val();
}

$(function() {
	$.extend($.jgrid.defaults, {
	    rowNum: 20,
	    rowList:[10, 20, 50, 100],
	    autowidth: true,
	    viewrecords: true,
	    gridview: true,
	    autoencode: false
	}); // jqgrid global 기본값 설정
	
    $("#list").jqGrid({
        url: "sample.json",
        datatype: "json",
        mtype: "get",
        colNames: ["컬럼-1", "컬럼-2", "컬럼-3", "컬럼-4"],
        colModel: [
            {name:"a", width:200, editable:true},
            {name:"b", width:200, search:true, stype:"text"},
            {name:"c", width:200, editable:true, formatter:formatterCodeSelect("1"), unformat:unformatSelect, edittype:"custom", editoptions:{custom_element:customSelectElem("1"), custom_value:customSelectValue}},
            {name:"d", width:100, editable:true, editoptions:{dataInit: function(el) { $(el).datepicker($.datepicker.regional["ko"]); }}}
        ],
        cmTemplate: {sortable:false}, // 정렬기능제거
        onSelectRow: function(id) {
            if (id && id !== lastsel) {
                $("#list").jqGrid("saveRow", lastsel, true);
                $("#list").jqGrid("restoreRow", lastsel);
                $("#list").jqGrid("editRow", id, true);
                lastsel = id;
            }
        },
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "a",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: false
    });
	
    $("button").button();
});
</script>
</head>
<body>
<div id="btnSet">
<button type="button" id="btnEdit">수정</button><button type="button" id="btnReply">답글</button><button type="button" id="btnDelete">삭제</button><button type="button" id="btnList">목록</button><span style="float:right;"><select id="searchCol"><option value="title">제목</option><option value="content">내용</option><option value="userid">작성자</option></select><input id="searchVal" type="text"/><button type="button" onclick="_list();">검색</button></span>
</div>
<table id="list" style="width:800px;"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>